<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@include file="/resources/common/commonTaglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 导入资源文件 -->
<%@include file="/resources/common/commonJs.jsp" %>
<%@include file="/resources/common/commonCss.jsp" %>
<script src="${path }/resources/zui-1.6.0/lib/selectable/zui.selectable.min.js"></script>
<title>校车派车</title>
<style type="text/css">
	.card{
		cursor: pointer;
		padding: 5px 5px 5px 5px;
	}
	
	#selectDiv >.card.active {
	  background: #3280fc;
	  color: #fff;
	}
	
</style>
<script type="text/javascript">
//前一天
function prevDate() {
	var flag = -1;
	window.location.href = '${path}/assignBusRecord/toAssignBusRecordPage?currentDate=${currentDate}&dateFlag='+flag;
}
//后一天
function nextDate() {
	var flag = 1;
	window.location.href = '${path}/assignBusRecord/toAssignBusRecordPage?currentDate=${currentDate}&dateFlag='+flag;
}

//派遣校车
function assignBus(id) {
	scheduleId = id;
	//发送请求, 获取校车信息
	var schoolHtml = "";
	var url = '${path}/assignBusRecord/getSchoolInfoByStatusAndCurrentplace/'+scheduleId;
	$.post(url, {}, function(data) {
		if (data == '1') {
			top.layer.alert('校车获取失败, 请稍后重试!');
		} else {
			for (var i = 0, len = data.length; i < len; i++) {
				schoolHtml += '<div class="card" style="width: 23%; margin: 1%; float: left;" data-id="'+data[i].id+'">'
							+ '<table style="width: 98%; margin: 0 1% 0 1%; font-size: 12px; " class="table">'
							+ '	<tr>'
							+ '		<td>车牌号</td>'
							+ '		<td>'+data[i].schoolNo+'</td>'
							+ '	</tr>'
							+ '	<tr>'
							+ '		<td>当前位置</td>'
							+ '		<td>'+data[i].localStatus+'</td>'
							+ '	</tr>'
							+ '	<tr>'
							+ '		<td>校车座位</td>'
							+ '		<td>'+data[i].seatTotal+' 个</td>'
							+ '	</tr>'
							+ '</table>'
							+ '</div>';
			}
			$('#selectDiv').html(schoolHtml);
			$('#schoolbusSelect').show();
		}
	}, 'json');
	
}

//取消选择
function cancelSelected() {
	//清空所有选择
	_selectDiv.unselect();
	$('#busSelectLength').html(0);
	$('#schoolbusSelect').hide();
}
//确定选择
function sureSelected() {
	if (busIds.length == 0) {
		$('#schoolbusSelect').hide();
		return ;
	}
	$('#'+scheduleId).find('td:eq(7)').html(busIds.length);
	$('#schoolbusSelect').hide();
	//提交请求
	top.layer.confirm('确定为该车次派遣' + busIds.length + '辆车？', function(index) {
		var url = '${path}/assignBusRecord/saveAssignBusRecord/'+scheduleId;
		var _busIds = '';
		for (var i = 0, len = busIds.length; i < len; i++) {
			_busIds = _busIds + busIds[i] + ',';
		}
		$.post(url, {'busIds': _busIds}, function(data) {
			if (data.status == 'error') {
				top.layer.close(index);
				top.layer.alert('校车派遣失败, 请稍后重试!');
			} else {
				top.layer.close(index);
				top.layer.alert('校车派遣成功!', function (indx) {
					top.layer.close(indx);
					window.location.href = '${path}/assignBusRecord/assignBusRecordList';
				});
			}
		}, 'json');
	}, function(index) {
		$('#'+scheduleId).find('td:eq(7)').html('暂无');
		cancelSelected();
	});
}

var scheduleId = 0;				//车次id
var busIds = [];				//校车ids
var _selectDiv = null;		//selectDiv实例
$(function() {
	$('#selectDiv').selectable({
	    selector: '.card',
	    clickBehavior:'multi',
	    finish: function(data) {
	    	busIds = data.selected;
	    	$('#busSelectLength').html(busIds.length);
	    }
	});
	_selectDiv = $('#selectDiv').data('zui.selectable');
})
</script>
</head>
<body>
<div class="panel panel-info" style="margin-top: 5px; margin-left: 2%; width: 96%">
	<div class="panel-heading">
		<i class="icon icon-backward"><a href="javascript:;" onclick="prevDate()">前一天</a></i><span style="margin-left: 10px; margin-right: 10px">${currentDate }</span><i class="icon icon-forward"><a href="javascript:;" onclick="nextDate()">后一天</a></i> 各个车次教师预约情况参考<span style="color: red"> *仅供参考</span>
	</div>
	<div class="panel-body">
		<div class="listDataTableStyle">
			<table cellpadding="0" cellspacing="0" width="100%">
				<thead>
					<tr>
					<th>序号</th>
					<th>车次编号</th>
					<th>始发站</th>
					<th>终点站</th>
					<th>发车时间</th>
					<th>到达时间</th>
					<th>预约人数</th>
					<th>选择车辆数</th>
					<th>派遣</th>
					</tr>
				</thead>
				<tbody>
				<c:forEach items="${busScheduleList }" var="data" varStatus="i">
					<tr id="${data.id }">
					<td>${i.index + 1 }</td>
					<td>${data.scheduleNo }</td>
					<td>${data.startStation == 1 ? '金花校区' : '临潼校区' }</td>
					<td>${data.endStation == 1 ? '金花校区' : '临潼校区' }</td>
					<td>${data.startTime }</td>
					<td>${data.endTime }</td>
					<td>${data.personNum }</td>
					<td>暂无</td>
					<td>
						<c:if test="${data.currentStatus != 2 }">
							<i class="icon icon-plus-sign"><a href="javascript:;" onclick="assignBus('${data.id}')">派遣校车</a></i>
						</c:if>
						<c:if test="${data.currentStatus == 2 }">
							<i class="icon"><a href="javascript:;">已派遣校车</a></i>
						</c:if>
					</td>
					</tr>
				</c:forEach>
				</tbody>
			</table>
		</div>
		<div style="display: none" id="schoolbusSelect">
			<p style="background-color: #DDF3F5; margin-top: 10px; line-height: 38px; font-size: 21px; font-weight: bold;">&nbsp;&nbsp;&nbsp;选择校车<span style="font-size: 14px; color: red; font-weight: normal;margin-left: 10px"> *点击选取</span></p>
			<div class="cards" id="selectDiv">
			
			</div>
			<div style="text-align: center;">
				<div>已选择 <span style="color: red" id="busSelectLength">0</span> 辆校车</div>
				<button class="btn btn-primary" style=" margin-left: 10px; margin-top: 10px;" onclick="sureSelected()">校车确定</button>
				<button class="btn" style=" margin-left: 10px; margin-top: 10px;" onclick="cancelSelected()">取消</button>
			</div>
		</div>
	</div>
</div>
</body>
</html>